<template>
	<view class="message">
		<template v-if="messagesItemList.length != 0">
			
		<view class="message-item" v-for="item in messagesItemList" :key="item.id">
			<view class="first" @click="read(item)">
				<text class="title">{{item.title}}</text>
				<view class="state">
					<text v-if="item.readed" class="label-read">已读</text>
					<text v-else class="label-unread">未读</text>
					<text class="iconfont" :class="currentIndex === item.id?'icon-fangxiangshang':'icon-fangxiangxia'" @click="change(item.id)"></text>
				</view>
			</view>
			<view class="second" v-if="currentIndex === item.id">
				<text>发送人：{{item.sendUserName}}</text>
				<text>发送时间：{{item.createTime | dateFormat}}</text>
				<text>发送内容：{{item.content}}</text>
			</view>
		</view>
		</template>
		<view class="message-item" v-else>暂无消息</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				messagesItemList:[],
				query: {
					pageIndex:1,
					pageSize: 10
				},
				total: 0 ,//总数
				currentIndex: -1,
				flag: false
			}
		},
		onLoad(){
			//获取token
			let token = uni.getStorageSync("token");
			console.log(!token);
			if( !token){
				// uni.showToast({
				// 	title: "请先登录！！"
				// })
				uni.redirectTo ({
					url: "/pages/login/login"
				});
			}
			//获取消息列表
			this.getMessageList();
		},
		onReachBottom(){
			console.log("触底了");
			if(this.total <= this.messagesItemList.length){
				this.flag = true;
				return ;
			}
			
			this.query.pageIndex++;
			//获取试卷列表
			this.getMessageList();
		},
		//下拉属性
		onPullDownRefresh(){
			this.query.pageIndex = 1;
			this.messagesItemList = [];
			this.flag = false;
			setTimeout( ()=>{this.getMessageList(()=> {uni.stopPullDownRefresh()})},1000);
		},
		methods: {
			
			//获取消息列表
			async getMessageList(callback){
				const resp = await this.$myRequest({
					url: "/api/student/user/message/page",
					data: this.query
				})
				if(resp){
					this.messagesItemList = [...this.messagesItemList,...resp.data.data];
					this.total = resp.data.total;
				}
				
				callback && callback();
			},
			async read(obj){
				if(obj.readed){
					return false;
				}
				this.currentIndex = obj.id;
				//读消息
				const resp = await this.$myRequest({
					url: "/api/student/user/message/read/"+obj.id,
					method: "POST"
				})
				if(resp.data.code == 200){
					this.messagesItemList = [];
					this.getMessageList();
					
				}
				
			},
			//显示与隐藏
			change(id){
				if( this.currentIndex == id){
					 this.currentIndex  = -1;
					 return;
				}
				this.currentIndex = id;
			}
		}
	}
</script>

<style lang="scss">
.message{
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	width:100%;
	box-sizing: border-box;
	.message-item{
		width: 92%;
		border-radius: 20rpx;
		background-color: #fff;
		margin-top: 20rpx;
		padding: 30rpx 30rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #616161;
		.first{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.title{
				color:#212121;
			}
			.state{
				display: flex;
				align-items: center;
				.label-read{
					width: 84rpx;
					height: 40rpx;
					border-radius: 10rpx;
					border:4rpx solid #66BB6A;
					background: rgba(102,187,106, 0.27);
					color:#66BB6A;
					padding: 4rpx 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.label-unread{
					width: 84rpx;
					height: 40rpx;
					border-radius: 10rpx;
					border:2rpx solid #E6A23C;
					background: #FCEFDB;
					color: #E6A23C;
					display: flex;
					padding: 4rpx 10rpx;
					justify-content: center;
					align-items: center;
				}
				.iconfont{
					margin-left: 20rpx;
					font-size: 48rpx;
					color:#C0C4CC;
				}
			}
			
		}
		.second{
			display: flex;
			flex-direction: column;
			color:#616161;
			font-size: 28rpx;
			text{
				margin-top: 20rpx;
			}
		}
	}
}
</style>
